<template>
    <el-menu :default-active="activePath" class="el-menu-vertical-demo" background-color="#333744" text-color="#fff"
        active-text-color="#409FFF" unique-opened :collapse="isCollapse" :collapse-transition="false"
        router>
        <!-- 一级菜单 -->
        <el-submenu :index="String(item.id)" v-for="item in menuList" :key="item.id">
            <!-- 一级菜单的模板区域 -->
            <template slot="title">
                <i :class="iconsObj[item.id]"></i>
                <span>{{ item.authName }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item 
            :index="'/' + subItem.path" 
            v-for="subItem in item.children" 
            :key="subItem.id"
            @click="saveNavState('/' + subItem.path)">
                <i class="el-icon-menu"></i>
                <span>{{ subItem.authName }}</span>
            </el-menu-item>
        </el-submenu>
    </el-menu>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            menuList: [],
            iconsObj: {
                '125': 'iconfont icon-yonghuguanli',
                '103': 'iconfont icon-quanxianguanli',
                '101': 'iconfont icon-shangpinguanli',
                '102': 'iconfont icon-yingxiaoguanli-dingdanguanli',
                '145': 'iconfont icon-shujutongji',
            },
            //是否折叠菜单
            isCollapse: false,
            activePath:'',
        };
    },
    created() {
        this.getMenuList()
        this.activePath = window.sessionStorage.getItem('activePath')
    },
    methods: {
        // 获取所有的菜单
        async getMenuList() {
            const { data: res } = await this.$http.get('menus')
            if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
            this.menuList = res.data
            console.log(res)
        },
        // 保存连接的激活状态
        saveNavState(activePath){
            window.sessionStorage.setItem('activePath',activePath)
            this.activePath = activePath
        }
    },

}

</script>
<style lang='less' scoped>
.iconfont {
    margin-right: 10px;
}

.el-menu {
    border-right: none;
}

</style>